Bootstrap MaxLength - Demo
Default usage
The badge will appear when the remaining chars are 10 or less:
$('input[maxlength]').maxlength();
Change the threshold value
The plugin will show the indicator for remaining chars since the number of chars left are 20.
$('input.className').maxlength({
threshold: 20
});
Few options
$('input.className').maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-important"
});
All the options
This is a complete example where all the options configured for the bootstrap-maxlength counter are setted.
Please note: if the alwaysShow
option is enabled, the threshold
option is ignored.
$('input.className').maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-important",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});
What about textareas?
Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
$('textarea#textarea').maxlength({
alwaysShow: true
});
Let's play with the position
The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right.
All you need to do is specify the placement
option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.
$('input#placement').maxlength({
alwaysShow: true,
placement: 'top-right'
});